<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>股票预测系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义CSS -->
    <link href="{{ url_for('static', path='/css/styles.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header class="text-center my-4">
            <h1>股票预测系统</h1>
            <p class="lead">基于DeepSeek AI的智能股票分析与预测平台</p>
        </header>

        <div class="system-status mb-3">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">系统状态</h5>
                    <button id="check-status-btn" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-sync-alt"></i> 检查状态
                    </button>
                </div>
                <div class="card-body">
                    <div id="status-container">
                        <div class="d-flex justify-content-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="search-container">
            <div class="card">
                <div class="card-header">
                    <h3>股票搜索</h3>
                </div>
                <div class="card-body">
                    <div class="search-box">
                        <input type="text" id="search-input" class="form-control" placeholder="请输入股票名称或代码...">
                        <button id="search-button" class="btn btn-primary">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>

                    <div class="search-status mt-3">
                        <div id="search-status-message" class="alert alert-info d-none">
                            搜索状态将显示在这里
                        </div>
                    </div>

                    <div class="search-results mt-3">
                        <h4>搜索结果</h4>
                        <div id="results-container">
                            <!-- 搜索结果将在这里显示 -->
                            <p class="text-muted" id="no-results-message">请输入股票名称或代码并点击搜索按钮</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="prediction-container mt-4">
            <div class="card">
                <div class="card-header">
                    <h3>股票预测</h3>
                </div>
                <div class="card-body">
                    <form id="prediction-form">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="stock-code" class="form-label">股票代码</label>
                                <input type="text" class="form-control" id="stock-code" name="stock_code" required>
                            </div>
                            <div class="col-md-6">
                                <label for="stock-name" class="form-label">股票名称</label>
                                <input type="text" class="form-control" id="stock-name" name="stock_name" required>
                            </div>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-success" id="predict-button">
                                <i class="fas fa-chart-line"></i> 开始预测
                            </button>
                        </div>
                    </form>

                    <div class="prediction-status mt-3">
                        <div id="prediction-status-message" class="alert alert-info d-none">
                            预测状态将显示在这里
                        </div>
                    </div>

                    <div class="prediction-results mt-4">
                        <h4>预测结果</h4>
                        <div id="prediction-container" class="d-none">
                            <div class="card mb-3">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="mb-0">基本面分析</h5>
                                </div>
                                <div class="card-body">
                                    <pre id="fundamental-analysis" class="analysis-content"></pre>
                                </div>
                            </div>

                            <div class="card mb-3">
                                <div class="card-header bg-info text-white">
                                    <h5 class="mb-0">技术面分析</h5>
                                </div>
                                <div class="card-body">
                                    <pre id="technical-analysis" class="analysis-content"></pre>
                                </div>
                            </div>

                            <div class="card mb-3">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0">预测结果</h5>
                                </div>
                                <div class="card-body">
                                    <pre id="prediction-result" class="analysis-content"></pre>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="mb-0">结果摘要</h5>
                                </div>
                                <div class="card-body">
                                    <div id="summary-result" class="analysis-content"></div>
                                </div>
                            </div>
                        </div>
                        <p class="text-muted" id="no-prediction-message">请填写股票信息并点击预测按钮</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="search-flow-container mt-4">
            <div class="card">
                <div class="card-header">
                    <h3>预测流程</h3>
                </div>
                <div class="card-body">
                    <div class="search-flow">
                        <div class="flow-step" id="step1">
                            <div class="step-number">1</div>
                            <div class="step-content">
                                <h5>搜索股票信息</h5>
                                <p>获取股票的基本面信息</p>
                            </div>
                        </div>
                        <div class="flow-arrow">→</div>
                        <div class="flow-step" id="step2">
                            <div class="step-number">2</div>
                            <div class="step-content">
                                <h5>获取历史数据</h5>
                                <p>收集股票的历史交易数据</p>
                            </div>
                        </div>
                        <div class="flow-arrow">→</div>
                        <div class="flow-step" id="step3">
                            <div class="step-number">3</div>
                            <div class="step-content">
                                <h5>AI分析</h5>
                                <p>DeepSeek AI分析基本面和技术面</p>
                            </div>
                        </div>
                        <div class="flow-arrow">→</div>
                        <div class="flow-step" id="step4">
                            <div class="step-number">4</div>
                            <div class="step-content">
                                <h5>生成预测</h5>
                                <p>综合分析生成股票走势预测</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="mt-5 mb-4 text-center text-muted">
            <p>© 2023 股票预测系统 | 基于DeepSeek AI技术</p>
        </footer>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义JS -->
    <script src="{{ url_for('static', path='/js/script.js') }}"></script>
</body>
</html>
